<template>
  <el-dialog
    v-model="dialogVisible"
    title="用户头像管理"
    width="500px"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div class="avatar-management">
      <div class="user-info">
        <h4>{{ userInfo?.userName || "未知用户" }}</h4>
        <p>用户ID: {{ userInfo?.userId || "N/A" }}</p>
      </div>

      <div class="avatar-section">
        <AvatarUploader
          :user-id="userInfo?.userId"
          :initial-avatar="userInfo?.avatar"
          :size="150"
          @success="handleAvatarUploadSuccess"
          @delete="handleAvatarDelete"
          @error="handleAvatarUploadError"
        />
      </div>

      <div v-if="userInfo?.avatar" class="avatar-info">
        <el-descriptions title="头像信息" :column="1" border>
          <el-descriptions-item label="头像URL">
            <el-link :href="userInfo.avatar" target="_blank" type="primary">
              {{ userInfo.avatar }}
            </el-link>
          </el-descriptions-item>
          <el-descriptions-item label="上传时间">
            {{ userInfo.updateTime || "未知" }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { ElMessage } from "element-plus";
import AvatarUploader from "@/components/AvatarUploader/index.vue";
import { type UserInfo } from "@/api/user-management";
import { type FileUploadResult } from "@/api/upload";

interface Props {
  visible: boolean;
  userInfo: UserInfo | null;
}

interface Emits {
  (e: "update:visible", value: boolean): void;
  (e: "success"): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

// 响应式数据
const dialogVisible = ref(false);

// 监听visible变化
watch(
  () => props.visible,
  val => {
    dialogVisible.value = val;
  },
  { immediate: true }
);

// 监听dialogVisible变化
watch(dialogVisible, val => {
  emit("update:visible", val);
});

/**
 * 头像上传成功处理
 */
const handleAvatarUploadSuccess = (result: FileUploadResult) => {
  console.log("头像上传成功:", result);
  ElMessage.success("头像上传成功");
  emit("success");
};

/**
 * 头像删除处理
 */
const handleAvatarDelete = () => {
  console.log("头像删除成功");
  ElMessage.success("头像删除成功");
  emit("success");
};

/**
 * 头像上传错误处理
 */
const handleAvatarUploadError = (error: any) => {
  console.error("头像上传失败:", error);
  ElMessage.error("头像上传失败，请重试");
};

/**
 * 关闭对话框
 */
const handleClose = () => {
  dialogVisible.value = false;
};
</script>

<style lang="scss" scoped>
.avatar-management {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.user-info {
  padding: 16px;
  text-align: center;
  background-color: var(--el-bg-color-page);
  border-radius: 8px;

  h4 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--el-text-color-primary);
  }

  p {
    margin: 0;
    font-size: 14px;
    color: var(--el-text-color-secondary);
  }
}

.avatar-section {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.avatar-info {
  margin-top: 16px;

  :deep(.el-descriptions__title) {
    font-size: 16px;
    font-weight: 600;
  }

  :deep(.el-descriptions-item__content) {
    word-break: break-all;
  }
}

.dialog-footer {
  text-align: right;
}
</style>
